<template>
  <!-- 用户管理 -->
  <div class="user-control">用户管理</div>
  <div class="report-road">
    <el-card style="max-width: 480px">
      <template #header>
        <div class="card-header">
          <h3>用户管理</h3>
        </div>
      </template>
      <el-table :data="filterTableData" style="width: 100%">
        <el-table-column label="序号" prop="date" />
        <el-table-column label="用户名" prop="name" />
        <el-table-column label="用户类型" prop="name" />
        <el-table-column label="登录状态" prop="name" />
        <el-table-column align="right">
          <template #header>
            <el-input v-model="search" size="small" placeholder="操作" />
          </template>
          <template #default="scope">
            <el-button
              size="small"
              @click="handleEdit(scope.$index, scope.row)"
            >
              修改
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >
              注销
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >
              下载
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'

// 接口定义 {
//   date: string, // 日期
//   name: string, // 姓名
//   address: string, // 地址
// }

const search = ref('')
const filterTableData = computed(() =>
  tableData.filter(
    (data) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )
)
const handleEdit = (index, row) => {
  console.log(index, row)
}
const handleDelete = (index, row) => {
  console.log(index, row)
}

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'John',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Morgan',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Jessy',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

<style scoped lang="scss">
.user-control {
  cursor: pointer;
}
.report-road {
  cursor: pointer;
  color: #409eff;
  z-index: 999;
}
.el-card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
